<template>
  <div class="login-container">
    <NavBar>
      <template #default> 登录 </template>
    </NavBar>

    <div class="login-content">
      <div class="logo">
        <el-icon color="#ff5000" :size="60">
          <ShoppingTrolley />
        </el-icon>
      </div>

      <div class="login-form">
        <div class="input-container">
          <el-input
            v-model="userName"
            placeholder="请输入账号"
            class="custom-input"
            :prefix-icon="User"
            clearable
          />
        </div>

        <div class="input-container">
          <el-input
            v-model="userPassword"
            placeholder="请输入密码"
            type="password"
            class="custom-input"
            :prefix-icon="Lock"
            show-password
            clearable
          />
        </div>

        <el-button
          class="login-btn"
          type="primary"
          @click="handleLogin"
          :loading="isLoggingIn"
        >
          登录
        </el-button>
        <br />
        <br />
        <el-button class="registered-btn" @click="goToRegister">
          还没有账号，去注册一个
        </el-button>
      </div>
    </div>

    <div class="bottom-cover">
      <div class="bottom-links">
        <span @click="goToAbout">关于</span>
        <span class="divider">|</span>
        <span @click="goToResetPassword">找回密码</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import NavBar from "../../components/common/NavBar.vue";
import { ref } from "vue";
import { ShoppingTrolley, User, Lock } from "@element-plus/icons-vue";
import router from "@/router";
import { ElMessage } from "element-plus";

// 导入 Pinia user store
import { useUserStore } from "@/stores/user";

const userName = ref("aaa");
const userPassword = ref("aaaaaa");
const isLoggingIn = ref(false); // 用于控制登录按钮的加载状态

// 获取 user store 实例
const userStore = useUserStore();

/**
 * 处理登录逻辑
 */
const handleLogin = async () => {
  // 1. 客户端表单验证
  if (userName.value.trim() === "" || userPassword.value.trim() === "") {
    ElMessage.warning("账号或密码不能为空！");
    return;
  }

  isLoggingIn.value = true; // 开始登录，设置加载状态为 true

  try {
    // 2. 调用 Pinia store 中的登录方法
    // userStore.login 会处理 API 调用、数据存储（Pinia state 和 localStorage）
    await userStore.login(userName.value, userPassword.value);

    // 3. 登录成功：提示用户并跳转
    // userStore.login 成功后，Pinia state 和 localStorage 已经更新
    ElMessage.success("登录成功！");
    router.push("/"); // 假设登录成功后跳转到根路径 '/'
  } catch (error) {
    // 4. 处理登录失败的错误
    console.error("登录请求失败:", error);
    // userStore.login 抛出的错误会在这里被捕获
    // 提取并显示后端返回的错误信息，或显示通用错误
    const errorMessage =
      error.message ||
      error.response?.data?.message ||
      "登录失败，请检查账号和密码。";
    ElMessage.error(errorMessage);
  } finally {
    // 无论成功或失败，最后都重置加载状态
    isLoggingIn.value = false;
  }
};

/**
 * 跳转到注册页面
 */
const goToRegister = () => {
  router.push("/register"); // 假设注册页面路由为 '/register'
};

/**
 * 跳转到关于页面
 */
const goToAbout = () => {
  router.push("/about"); // 假设关于页面路由为 '/about'
};

/**
 * 跳转到找回密码页面
 */
const goToResetPassword = () => {
  router.push("/reset-password"); // 假设找回密码页面路由为 '/reset-password'
};
</script>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: white; /* 纯白背景 */
}

.login-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  margin-top: 20px;
}

.logo {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}

.login-form {
  width: 100%;
  max-width: 300px;
}

.input-container {
  margin-bottom: 20px;
}

/* 统一输入框样式 */
:deep(.custom-input .el-input__wrapper) {
  border-radius: 25px;
  padding: 0 20px;
  height: 50px;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.custom-input .el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset;
}

:deep(.custom-input .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #ff5000 inset;
}

:deep(.custom-input .el-input__inner) {
  height: 48px;
}

/* 登录按钮样式 */
.login-btn {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: #ff5000;
  border: none;
  font-size: 16px;
  font-weight: bold;
}

.login-btn:hover {
  background-color: #ff3a00;
}

.registered-btn {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #000000;
}

.registered-btn:hover {
  color: #3b3b3b;
  background-color: #f5f5f5;
}

/* 覆盖底部导航栏 */
.bottom-cover {
  height: 120px;
  background-color: white;
  z-index: 1000;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 30px;
}

.bottom-links {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.bottom-links span {
  cursor: pointer;
  color: #606266;
  transition: color 0.3s;
}

.bottom-links span:hover {
  color: #ff5000;
}

.bottom-links .divider {
  margin: 0 10px;
  color: #dcdfe6;
  cursor: default;
}
</style>